<template>
  <div>
    <div class="my-card">
      <div class="my-card-header">
        <div class="flex items-center justify-between">
          <span>
            <span class="my-card-title">{{ $t('operator.account_info') }}</span>
          </span>
          <div>
            <!--            <el-button size="small">Cancel</el-button>-->
            <el-dropdown
              v-if="developer.status != 3 && isAuth('10400402.MANAGE')"
              @command="
                (command) => {
                  handleDevCommand(command, developer)
                }
              "
            >
              <span class="el-dropdown-link">
                <svg-icon style="font-size: 22px" icon-class="menu" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    command="apply"
                    v-if="developer.status === 2 && isAuth('10400402.MANAGE')"
                  >
                    <span class="text-center">
                      {{ $t('developer.operate_apply_cert') }}
                    </span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    command="download"
                    v-if="developer.status === 7 && isAuth('10400402.MANAGE')"
                  >
                    <span class="text-center">
                      {{ $t('developer.operate_download_cert') }}
                    </span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    command="lock"
                    v-if="developer.status === 1 && isAuth('10400402.MANAGE')"
                  >
                    <span class="text-center">
                      {{ $t('developer.operate_lock') }}
                    </span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    command="unlock"
                    v-if="developer.status === 0 && isAuth('10400402.MANAGE')"
                  >
                    <span class="text-center">
                      {{ $t('developer.operate_unlock') }}
                    </span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    command="close"
                    v-if="developer.status === 1 && isAuth('10400402.MANAGE')"
                  >
                    <span class="text-center">
                      {{ $t('developer.operate_close') }}
                    </span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    command="examine"
                    v-if="developer.status === 7 && isAuth('10400402.MANAGE')"
                  >
                    <span class="text-center">
                      {{ $t('developer.operate_examine') }}
                    </span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    command="reject"
                    v-if="developer.status === 2 && isAuth('10400402.MANAGE')"
                  >
                    <span class="text-center">
                      {{ $t('developer.operate_reject') }}
                    </span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="my-card-body">
        <div v-if="developer && developer.status !== 1" class="seal">
          <div class="subseal">
            {{ statusFilter(developer.status) }}
          </div>
        </div>
        <el-descriptions v-if="developer" style="padding: 16px" :column="1">
          <el-descriptions-item :label="$t('developer.name')">
            {{
              developer.developerType === 1
                ? developer.contactName
                : developer.firstName
            }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('developer.developerType')">
            {{
              developer.developerType === 1
                ? $t('developer.developer_type_list.personal')
                : $t('developer.developer_type_list.company')
            }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('developer.pidType')">{{
            developer.pidType === 1
              ? $t('developer.id_card')
              : developer.pidType === 2
              ? $t('developer.passport')
              : developer.developerType === 2
              ? $t('developer.business_license')
              : $t('developer.unknown')
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('developer.pidNo')">{{
            developer.pidNo
          }}</el-descriptions-item>
          <el-descriptions-item
            v-if="developer.developerType === 2"
            :label="$t('developer.contactName')"
          >
            {{ developer.contactName }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('developer.creTime')">{{
            formatDate(developer.creTime, 'YYYY-MM-DD HH:mm:ss')
          }}</el-descriptions-item>
        </el-descriptions>
        <hr />
        <el-descriptions style="padding: 16px" :column="2">
          <el-descriptions-item :label="$t('developer.mobile')">{{
            developer.mobile
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('developer.email')">{{
            developer.email
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('operator.country')">{{
            $t('country_or_region.' + developer.countryCode)
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('developer.address')">{{
            developer.address
          }}</el-descriptions-item>
          <el-descriptions-item
            :label="$t('developer.remark')"
            :contentStyle="{ width: '95%' }"
          >
            <!--            {{ developer.remark }}-->
            <div>
              <el-input
                type="textarea"
                maxlength="256"
                :autosize="{ minRows: 4, maxRows: 8 }"
                v-model="developer.remark"
                style="width: 100%"
              >
              </el-input>
              <div
                v-if="isAuth('10400402.MANAGE')"
                class="flex justify-end"
                style="margin-top: 10px"
              >
                <el-button
                  size="small"
                  type="primary"
                  :loading="isDisabled"
                  @click="submitRemark()"
                  >{{ $t('common.save') }}</el-button
                >
              </div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-dialog
      :visible="rejectDeveloperVisible"
      :title="$t('common.reject')"
      width="500px"
      @close="rejectCancel"
    >
      <el-form
        ref="rejectForm"
        :rules="rejectRules"
        size="small"
        :model="rejectForm"
        label-width="120px"
      >
        <el-form-item :label="$t('developer.name')" prop="name">
          <el-input
            v-model="rejectForm.name"
            disabled
            show-word-limit
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('common.reject_reason')" prop="rejectReason">
          <el-input
            v-model="rejectForm.rejectReason"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            maxlength="256"
            show-word-limit
            clearable
            @blur="
              () => (rejectForm.rejectReason = rejectForm.rejectReason.trim())
            "
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="rejectCancel">{{
            $t('common.cancel')
          }}</el-button>
          <el-button
            type="primary"
            size="small"
            :loading="isDisabled"
            @click="rejectSubmit()"
            >{{ $t('common.confirm') }}</el-button
          >
        </span></template
      >
    </el-dialog>
    <resetpw-developer ref="resetpw" />
    <check-developer
      v-if="checkDeveloperVisible"
      ref="checkDeveloper"
      @refreshDataList="getDeveloperInfo"
      @close="checkDeveloperVisible = false"
    ></check-developer>
    <developer-apply-cert
      v-if="applyCertVisible"
      ref="applyCert"
      @refreshDataList="getDeveloperInfo"
      @close="applyCertVisible = false"
    ></developer-apply-cert>
  </div>
</template>

<script>
import { formatDate } from '@/utils/formatDate'
import resetpwDeveloper from './resetpw-developer.vue'
import { formatCountry } from '@/utils/formatCountry'
import {
  closeDeveloper,
  getDeveloperInfo,
  lockDeveloper,
  rejectDeveloper,
  unlockDeveloper,
  updateRemark
} from '@/api/developer'
import DeveloperApplyCert from '@/views/developer/developer-apply-cert'
import CheckDeveloper from '@/views/developer/check-developer'
import { isAuth } from '@/utils'

export default {
  components: {
    resetpwDeveloper,
    DeveloperApplyCert,
    CheckDeveloper
  },
  data() {
    return {
      developer: null,
      remarkForm: {
        remark: '',
        developerId: ''
      },
      applyCertVisible: false,
      checkDeveloperVisible: false,
      rejectDeveloperVisible: false,
      dataListLoading: false,
      isDisabled: false,
      rejectForm: {
        name: '',
        rejectReason: '',
        developerId: ''
      },
      rejectRules: {
        rejectReason: [
          {
            required: true,
            message: this.$t('common.reject_reason_tip_empty'),
            trigger: ['blur']
          }
        ]
      }
    }
  },
  created() {
    this.developer = JSON.parse(localStorage.getItem('developer-info'))
    this.getDeveloperInfo()
  },
  methods: {
    statusFilter(status) {
      const statusMap = {
        0: this.$t('developer.status_list.locked'),
        1: this.$t('developer.status_list.normal'),
        2: this.$t('developer.status_list.pending_review'),
        3: this.$t('developer.status_list.rejected'),
        5: this.$t('developer.status_list.country_examine'),
        7: this.$t('developer.status_list.cert_examine'),
        8: this.$t('developer.status_list.logged_off')
      }
      return statusMap[status]
    },
    getDeveloperInfo() {
      if (this.developer !== null && this.developer.developerId !== undefined) {
        getDeveloperInfo(this.developer.developerId)
          .then((res) => {
            this.developer = res
          })
          .catch(this.$confirmError)
      }
    },
    formatCountry(value) {
      return formatCountry(value)
    },
    formatDate(cellValue, fmt) {
      return formatDate(cellValue, fmt)
    },
    handleDevCommand(command, data) {
      if (command === 'apply') {
        this.applyCert(data)
      } else if (command === 'download') {
        this.download(data)
      } else if (command === 'lock') {
        this.handleLock(data.developerId)
      } else if (command === 'unlock') {
        this.handleUnLock(data.developerId)
      } else if (command === 'close') {
        this.handleClose(data.developerId)
      } else if (command === 'examine') {
        this.checkDeveloper(data)
      } else if (command === 'reject') {
        this.rejectDeveloper(data)
      }
    },
    applyCert(developer) {
      this.applyCertVisible = true
      this.$nextTick(() => {
        this.$refs.applyCert.init(developer)
      })
    },
    download(developer) {
      if (developer) {
        const link = document.createElement('a')
        link.style.display = 'none'
        link.setAttribute('target', 'tempframe')
        link.setAttribute(
          'href',
          import.meta.env.VITE_APP_BASE_API +
            '/online/developer-admin/developer/' +
            developer.developerId +
            '/cert'
        )
        link.click()
      }
    },
    checkDeveloper(developer) {
      this.checkDeveloperVisible = true
      this.$nextTick(() => {
        this.$refs.checkDeveloper.init(developer)
      })
    },
    rejectDeveloper(developer) {
      this.rejectForm.developerId = developer.developerId
      if (developer.developerType === 1) {
        this.rejectForm.name = developer.contactName
      } else {
        this.rejectForm.name = developer.firstName
      }
      this.rejectDeveloperVisible = true
    },
    handleLock(developerId) {
      this.$confirm(this.$t('developer.confirm_lock'), '', {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        this.dataListLoading = true
        lockDeveloper(developerId)
          .then((data) => {
            this.dataListLoading = false
            this.getDeveloperInfo()
          })
          .catch((e) => {
            this.dataListLoading = false
            this.$confirmError(e)

            console.log(`err:${JSON.stringify(e)}`)
          })
      })
    },
    handleUnLock(developerId) {
      this.$confirm(this.$t('developer.confirm_unlock'), '', {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        this.dataListLoading = true
        unlockDeveloper(developerId)
          .then((data) => {
            this.dataListLoading = false
            this.getDeveloperInfo()
          })
          .catch((e) => {
            this.$confirmError(e)

            this.dataListLoading = false
            console.log(`err:${JSON.stringify(e)}`)
          })
      })
    },
    handleClose(developerId) {
      this.$confirm(this.$t('developer.confirm_close'), '', {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        this.dataListLoading = true
        closeDeveloper(developerId)
          .then((data) => {
            this.dataListLoading = false
            this.getDataList()
          })
          .catch((e) => {
            this.$confirmError(e)
            this.dataListLoading = false
            console.log(`err:${JSON.stringify(e)}`)
          })
      })
    },
    rejectCancel() {
      this.$refs['rejectForm'].resetFields()
      this.rejectDeveloperVisible = false
    },
    rejectSubmit() {
      this.$refs['rejectForm'].validate((valid) => {
        if (valid) {
          this.isDisabled = true
          rejectDeveloper(this.rejectForm)
            .then(() => {
              this.$message.success(this.$t('common.operate_success'))
              this.getDeveloperInfo()
              this.rejectDeveloperVisible = false
              this.isDisabled = false
              this.rejectForm = {
                name: '',
                rejectReason: '',
                developerId: ''
              }
            })
            .catch((e) => {
              this.isDisabled = false
              this.$confirmError(e)
            })
        }
      })
    },
    submitRemark() {
      this.isDisabled = true
      this.remarkForm.developerId = this.developer.developerId
      this.remarkForm.remark = this.developer.remark
      updateRemark(this.remarkForm)
        .then((data) => {
          this.$message.success(this.$t('common.operate_success'))
          this.isDisabled = false
        })
        .catch((e) => {
          this.isDisabled = false
          this.$confirmError(e)
        })
    },
    isAuth
  }
}
</script>

<style lang="scss" scoped>
.my-card {
  background: #ffffff;
  border: 1px solid #eef0f7;
  box-shadow: 0px 0px 21px 0px rgba(19, 33, 68, 0.08);
  border-radius: 12px;
  margin: 0 36px;
  .my-card-header {
    padding: 32px 24px;
    border-bottom: solid 1px #eef0f7;
    .my-card-title {
      color: #1e2022;
      font-size: 16px;
      font-weight: 600;
    }
  }

  .my-card-body {
    padding: 36px;
    padding-left: 100px;
    padding-right: 100px;
    position: relative;
  }
}

.seal {
  height: 100px;
  top: -24px;
  right: 70px;
  border: solid 6px #f56c6c;
  border-radius: 16px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-15deg);
  .subseal {
    height: 80px;
    margin: 4px;
    padding: 12px;
    border: solid 2px #f56c6c;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 900;
    color: #f56c6c;
  }
}

::v-deep .el-descriptions__body {
  color: #677796;
}
</style>
